/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */
const queryObj = {
  status:'', //文章状态 （1-待审核 2-审核通过 空字符串-全部）
  channel_id: '', //文章频道 id,空字符串-全部
  page: 1, //当前页码
  per_page: 2 //每一页条数
}
let totalCount = 0; // 保存文章总条数
async function render() {
  const data = await axios({url: '/v1_0/mp/articles', params: queryObj});
  console.log(data);

  // 1.3 展示到指定的标签结构中
  const htmlStr = data.data.results.map(item => {
    return `
    <tr>
      <td>
        <img src="${item.cover.type === 0 ? `https://img2.baidu.com/it/u=2640406343,1419332367&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=708&amp;h=500`: item.cover.images[0]}" alt="">
      </td>
      <td>${item.title}</td>
      <td>
      ${item.status === 1 ? '<span class="badge text-bg-primary">待审核</span>' : '<span class="badge text-bg-success">审核通过</span>'}
      </td>
      <td>
        <span>${item.pubdate}</span>
      </td>
      <td>
        <span>${item.read_count}</span>
      </td>
      <td>
        <span>${item.comment_count}</span>
      </td>
      <td>
        <span>${item.like_count}</span>
      </td>
      <td data-id="${item.id}">
        <i class="bi bi-pencil-square edit"></i>
        <i class="bi bi-trash3 del" ></i>
      </td>
    </tr>`
  }).join('');
  document.querySelector('.art-list').innerHTML = htmlStr;
  // 3.1 保存并设置文章总条数
  totalCount = data.data.total_count;
  document.querySelector('.total-count').innerHTML = `共${totalCount}条`;
}
render();
/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */
async function setChannelList() {
  const res =  await axios({url: '/v1_0/channels'});
  // console.log(res);
  const htmlStr =`<option value="" selected>请选择文章频道</option>` + res.data.channels.map(item => {
    return `<option value="${item.id}">${item.name}</option>`
  }).join('');
  document.querySelector('.form-select').innerHTML = htmlStr;
}

setChannelList();

document.querySelectorAll('.form-check-input').forEach(radio => {
  // console.log(radio);
  radio.addEventListener('change', e => {
    // console.log(e.target.value);
    queryObj.status = e.target.value;
  })
})

// 监听筛选频道的id
document.querySelector('.form-select').addEventListener('change', e => {
  console.log(e.target.value);
  queryObj.channel_id = e.target.value;
})

//2.3 点击筛选时，传递查询参数对象到服务器
document.querySelector('.sel-btn').addEventListener('click', () => {
  // 上面有一个封装的渲染函数，调用就可以了
  render();
})
/**
 * 目标3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */
// 3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
document.querySelector('.next').addEventListener('click', e => {
    // 当前页码小于最大页码数的时候才会渲染页面
    if(queryObj.page < Math.ceil(totalCount/queryObj.per_page)) {
      queryObj.page++;
      document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`;
      render();
    }
})

// 3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
document.querySelector('.last').addEventListener('click', e => {
    // 当前页码小于最大页码数的时候才会渲染页面
    if(queryObj.page < Math.ceil(totalCount/queryObj.per_page) && queryObj.page > 1) {
      queryObj.page--;
      document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`;
      render();
    }
})
/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */

/* 这里由于找不到那个接口文档，所以没有往后写了，就去看老师的思路了，然后发现
其实老师在上面渲染的时候已经将其删除、编辑啥的都渲染出来了，其实当时我也在想我的编辑还得写一遍id，这样加在那一行上面就不会有这个烦恼了 */
/* axios({
  url: '/v1_0/mp/articles', 
  params: queryObj
}).then(data => {
  const is = data.data.results.map(item => {
  return `<i class="bi bi-trash3 del" id="${item.id}"></i>` 
   })
  console.log(is);
  axios({
    url: '/v1_0/mp/articles/:target',
    method: 'delete',
    data:item.id
  })
})
*/

document.querySelector('.art-list').addEventListener('click', async e => {
  // 判断点击的是删除元素
  if(e.target.classList.contains('del')) {
    const delId = e.target.parentNode.dataset.id;
    // console.log(delId);
    const res = await axios({url: `/v1_0/mp/articles/${delId}`, method: 'delete'});
    // console.log(res);
    const children = document.querySelector('.art-list').children;
    // 这里是说后台关于我们删除的那条数据已经删除了，但是现在页面上还显示着啊，所以页面上显示的数据原来是多少现在还是多少
    if(queryObj.page != 1 && children.length === 1) {
      queryObj.page--;
    }
    document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`;
    render();
  }
}) 
// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去
document.querySelector('.art-list').addEventListener('click', e => {
  if(e.target.classList.contains('edit')) {
    const editId = e.target.parentNode.dataset.id;
    location.href = `../publish/index.html?id=${editId}`;  
  }
})
